<template>
    <div class="homes">
        <header>
            <ly-tab
                v-model="selectedId"
                :items="items"
                :options="options"
                @change="handleChangeRouter" >
            </ly-tab>
        </header>
         <section>
            <router-view></router-view>
         </section>
        <footer>
            <FooterBar></FooterBar>
        </footer>
    </div>
</template>
<script>
import FooterBar from "@/components/footerBar";
export default {
    name:"home",
    props:{

    },
    components:{
        FooterBar,
    },
    data(){
        return {
            selectedId: 0,
            items: [
                {label: '热门',routerLink:"/home/hot"},
                {label: '女装',routerLink:"/home/cloth"},
                {label: '百货',routerLink:"/home/proudects"},
                {label: '母婴',routerLink:"/home/babys"},
                {label: '手机'},
                {label: '鞋包'},
                {label: '电器'},
                {label: '美装'},
                {label: '运动'},
                {label: '男装'},
                {label: '水果'},
                {label: '医药'},
                {label: '家具'}
            ],
            options: {
                activeColor: 'red'
                // 可在这里指定labelKey为你数据里文字对应的字段
            },
        }
    },
    computed:{

    },
    methods:{
         handleChangeRouter(item,index){
               this.$router.push(item.routerLink)
         }
    },
    created(){

    },
    mounted(){

    }
}
</script>
<style scoped lang="scss">
@import "~@/scss/common.scss";
.homes{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    header{
        width:100%;
        height:pxTorem(44px);
        .ly-tab{
           width:100%;
           height:pxTorem(44px); 
        }
    }
    section{
        flex:1;
        overflow-y:scroll;
        &::-webkit-scrollbar{
	     display: none;
     }
    }
    footer{
       width:100%;
       height:pxTorem(50px);
    }
}
</style>